/*
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-10-16 15:25:48
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-10-16 15:50:18
 * @FilePath: /react18-vite-admin/src/views/system/MenusManage/components/EditView.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import { Row, Col, Form, TreeSelect, Input, InputNumber } from 'antd';

import CustomDialog from '@/components/ui/CustomDialog/CustomDialog';
import CustomCard from '@/components/ui/CustomCard/CustomCard';
import CenterGap10 from '@/components/ui/CenterGap10/CenterGap10';
import Button from '@/components/ui/Button/Button';
import { useRules } from '@/service/useRules';
import LoadingPage from '@/components/ui/LoadingPage/LoadingPage';

import { useForm } from './useForm';

const EditView = (props: {
    parentId?: number;
    id?: number;
    open: boolean;
    onClose: () => void;
    afterSubmit: () => void;
}) => {
    const { parentId, id, open, onClose, afterSubmit } = props;

    const [formRef] = Form.useForm();

    const { requiredRule } = useRules();

    const {
        title,
        handleEdit,
        handleSubmit,
        formModel,
        setFormModel,
        menuTreeItems,
        saveLoading,
        loading
    } = useForm(formRef, parentId, id, open, afterSubmit);
    return (
        <CustomDialog title={title} open={open} onClose={onClose}>
            <CustomCard title="">
                <LoadingPage loading={loading}>
                    <Form
                        form={formRef}
                        onFinish={handleSubmit}
                        onReset={handleEdit}
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                    >
                        <Row>
                            <Col span="8">
                                <Form.Item
                                    label="父级"
                                    name="parentId"
                                    rules={requiredRule}
                                >
                                    <TreeSelect
                                        placeholder="请选择"
                                        value={formModel.parentId}
                                        treeData={[
                                            {
                                                label: '顶级',
                                                value: -1,
                                                children: JSON.parse(
                                                    JSON.stringify(
                                                        menuTreeItems
                                                    )
                                                )
                                            }
                                        ]}
                                        onChange={(value) =>
                                            setFormModel((draft) => {
                                                draft.parentId = value;
                                            })
                                        }
                                        treeDefaultExpandAll
                                        allowClear
                                    />
                                </Form.Item>
                            </Col>

                            <Col span="8">
                                <Form.Item
                                    label="菜单名称"
                                    name="name"
                                    rules={requiredRule}
                                >
                                    <Input
                                        value={formModel.name}
                                        onChange={(e) =>
                                            setFormModel((draft) => {
                                                draft.name = e.target.value;
                                            })
                                        }
                                        placeholder="请输入菜单名称"
                                        allowClear
                                    ></Input>
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="8">
                                <Form.Item label="菜单路径" name="path">
                                    <Input
                                        value={formModel.path}
                                        onChange={(e) =>
                                            setFormModel((draft) => {
                                                draft.path = e.target.value;
                                            })
                                        }
                                        placeholder="请输入菜单路径"
                                        allowClear
                                    ></Input>
                                </Form.Item>
                            </Col>
                            <Col span="8">
                                <Form.Item label="排序" name="sortWeight">
                                    <InputNumber
                                        value={formModel.sortWeight}
                                        onChange={(value) =>
                                            setFormModel((draft) => {
                                                draft.sortWeight = value ?? 1;
                                            })
                                        }
                                        type="number"
                                        placeholder="请输入排序值"
                                        min={1}
                                    ></InputNumber>
                                </Form.Item>
                            </Col>
                        </Row>
                        <CenterGap10>
                            <Button
                                type="primary"
                                htmlType="submit"
                                loading={saveLoading}
                            >
                                提交
                            </Button>
                            <Button htmlType="reset" loading={saveLoading}>
                                重置
                            </Button>
                        </CenterGap10>
                    </Form>
                </LoadingPage>
            </CustomCard>
        </CustomDialog>
    );
};

export default EditView;
